<!-- 编辑信息 修改资料 页面 -->
<template>
	<view class="container">
		<uni-list-item title="头像" clickable @click="changeUserpic">
			<template v-slot:body>
				<text class="slot-box slot-text">头像</text>
			</template>
			<template v-slot:footer>
				<image class="slot-image rounded-circle" :src="user.userpic ? user.userpic :'/static/demo/userpic/4.jpg'" style="width: 100rpx;height: 100rpx;"></image>
				<text class="iconfont icon-bianji1" style="display: flex;align-items: center;"></text>
			</template>
		</uni-list-item>
		<uni-list-item title="昵称" clickable>
			<template v-slot:body>
				<text class="slot-box slot-text">昵称</text>
			</template>
			<template v-slot:footer>
				<input class="uni-input text-right" v-model="username" />
				<text class="iconfont icon-bianji1 ml-2"></text>
			</template>
		</uni-list-item>
		<uni-list-item title="性别" clickable @click="changeSex">
			<template v-slot:body>
				<text class="slot-box slot-text">性别</text>
			</template>
			<template v-slot:footer>
				<text class="font">{{ sexText }}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</template>
		</uni-list-item>
		<picker mode="date" :value="birthday" @change="onDateChange">
			<uni-list-item title="生日" clickable>
				<template v-slot:body>
					<text class="slot-box slot-text">生日</text>
				</template>
				<template v-slot:footer>
					<text class="font">{{ birthday }}</text>
					<text class="iconfont icon-bianji1 ml-2"></text>
				</template>
			</uni-list-item>
		</picker>
		<uni-list-item title="情感" clickable @click="changeEmotion">
			<template v-slot:body>
				<text class="slot-box slot-text">情感</text>
			</template>
			<template v-slot:footer>
				<text class="font">{{ emotionText }}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</template>
		</uni-list-item>
		<uni-list-item title="职业" clickable @click="changeJob">
			<template v-slot:body>
				<text class="slot-box slot-text">职业</text>
			</template>
			<template v-slot:footer>
				<text class="font">{{ job }}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</template>
		</uni-list-item>
		<uni-list-item title="家乡" clickable @click="showCity">
			<template v-slot:body>
				<text class="slot-box slot-text">家乡</text>
			</template>
			<template v-slot:footer>
				<text class="font">{{ pickerText }}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</template>
		</uni-list-item>
		<!-- 完成 -->
		<view class="py-2 px-3">
			<button class="bg-main text-white" style="border-radius:50rpx;border:0;" type="primary" @click="submit">
				完成
			</button>
		</view>
		<!-- 三级联动 地区选择 （直接复制的） -->
		<mpvueCityPicker
			:themeColor="themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvueCityPicker>
	</view>
</template>

<script>
	// 性别 数据
	const sexArray = ['保密', '男', '女'];
	// 情感 数据
	const emotionArray = ['保密', '已婚', '未婚'];
	// 引入 uniapp 地区选择组件（直接复制的）
	import mpvueCityPicker from '@/common/mpvue-citypicker/mpvueCityPicker.vue';
	// 引入vuex
	import { mapState } from 'vuex';
	export default {
		components: {
			mpvueCityPicker,
		},
		data() {
			return {
				username: '昵称', // 用户名称
				sex: 0, // 性别
				emotion: 0, // 情感，已婚，未婚，保密
				job: '保密', // 职业
				birthday: '1999-11-08', // 生日

				// 以下是地区 三级联动 地区选择的数据（直接复制的）
				themeColor: '#007AFF', // 主题颜色
				cityPickerValueDefault: [0, 0, 1], // 选中区域的下标
				pickerText: '选择地址', // 选中的地址
				// 地区选择 到这里截止 ----------------------
			};
		},
		// 以下是地区选择所使用的 （直接复制的）
		// 监听页面返回
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
			}
		},
		// 监听页面加载时
		onLoad() {
			// 初始化信息
			let userinfo = this.user.userinfo;
			if (userinfo) {
				this.pickerText = userinfo.path;
				this.username = this.user.username;
				this.sex = userinfo.sex;
				this.emotion = userinfo.qg;
				this.job = userinfo.job;
				this.birthday = userinfo.birthday;
			}
		},
		// --------------- 区域选择 截止这里上面是 复制的
		// 计算属性
		computed: {
			// 结构赋值
			...mapState({
				// 获取到 state中的 user用户信息
				user: (state) => state.user,
			}),
			sexText() {
				// 返回 sex下标对应的性别
				return sexArray[this.sex];
			},
			emotionText() {
				// 返回 emotion下标对应的 情感
				return emotionArray[this.emotion];
			},
		},
		methods: {
			// 点击地区，显示 三级联动 地区选择
			showCity() {
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动 地区 提交事件 （直接复制的）
			onConfirm(e) {
				// 选中的 地区 数据
				/**
				 *  label:'北京市-市辖区-丰台区' // 要给页面赋值
				 *  value:[0,0,3] 选中的下标，传递给后端
				 * cityCode:110106 区域邮编 传递给后端
				 */
				// this.pickerText = JSON.stringify(e)
				this.pickerText = e.label;
				console.log(this.pickerText);
			},
			// 修改头像
			changeUserpic() {
				// 从本地相册选取照片
				uni.chooseImage({
					count: 1, // 最多可以选择多少张图片
					sizeType: ['compressed'], // 头像使用压缩图
					sourceType: ['album', 'camera'], //从相册选择，使用相机
					success: (res) => {
						/* 调用request封装的 文件上传 方法
						*/
						this.$H.upload('/edituserpic', {
								filePath: res.tempFilePaths[0], // 要上传文件资源的路径。
								// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
								name: 'userpic',  // 接口文档，要传输的字段
								token: true,
							}).then((result) => {
								console.log(result);
								// 调用 vuex中修改 信息方法，修改用户头像
								this.$store.commit('editUserInfo', {
									key: 'userpic', // state.user中的 phone字段
									value: result.data,
								});
								uni.showToast({
									title: result.msg,
									icon: 'none',
								});
							})
							.catch((err) => {
								console.log(err);
							});
						// 赋值 头像 字段
						// this.userpic = res.tempFilePaths[0];
						// uni.showToast({
						// 	title: '图片上传成功',
						// 	icon: 'none',
						// 	duration: 1000,
						// });
					},
				});
			},
			// 修改性别
			changeSex() {
				// 从底部向上弹出操作菜单
				uni.showActionSheet({
					// 按钮的文字数组
					itemList: sexArray,
					success: (res) => {
						this.sex = res.tapIndex;
					},
				});
			},
			// 修改情感
			changeEmotion() {
				// 从底部向上弹出操作菜单
				uni.showActionSheet({
					// 按钮的文字数组
					itemList: emotionArray,
					success: (res) => {
						this.emotion = res.tapIndex;
					},
				});
			},
			// 修改职业
			changeJob() {
				let JobArray = ['IT', '农民', '包工头'];
				// 从底部向上弹出操作菜单
				uni.showActionSheet({
					// 按钮的文字数组
					itemList: JobArray,
					success: (res) => {
						this.job = JobArray[res.tapIndex];
					},
				});
			},
			// 修改生日
			onDateChange(e) {
				this.birthday = e.detail.value;
			},
			// 提交 修改的所有参数
			submit() {
				let obj = {
					name: this.username, // 昵称
					sex: this.sex, // 性别
					qg: this.emotion, // 情感
					job: this.job, //工作
					birthday: this.birthday, //生日
					path: this.pickerText, //地址
				};
				// 请求修改资料 接口
				this.$H
					.post('/edituserinfo', obj, {
						token: true,
					})
					.then((res) => {
						console.log(res);
						// 调用 vuex中修改 信息方法，修改用户昵称
						this.$store.commit('editUserInfo', {
							key: 'username', // state.user中的 username字段
							value: this.username,
						});
						// 调用 vuex中修改 资料方法，修改 所传信息
						this.$store.commit('editUserMessage', obj);
						uni.showToast({
							title:'修改资料成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1,
							});
						},800)
					}); 
			},
		},
	};
</script>

<style lang="scss">
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #161616;
		margin-right: 10px;
	}
	.uni-input {
		height: 0;
		padding: 0;
		line-height: 20rpx;
	}
</style>
